import React, { ReactNode } from 'react';

interface CardProps {
  title?: string;
  children: ReactNode;
  className?: string;
  extra?: ReactNode;
  onClick?: () => void;
}

export const Card: React.FC<CardProps> = ({ title, children, className = '', extra, onClick }) => {
  return (
    <div 
      className={`bg-white rounded-lg shadow p-4 ${className}`}
      onClick={onClick}
    >
      {title && (
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-medium">{title}</h3>
          {extra}
        </div>
      )}
      {children}
    </div>
  );
}; 